<template>
    <div class="item_paging" align="center">
        <a href="#formhead" id="firstPage" @click="firstPage">首页</a>
        <a href="#formhead" id="previousPage" @click="previousPage">上一页</a>
        <span id="pageRoller">
            <span v-for="(item,index) in totalPages" :key="index" v-if="item >= minRoller && item <= maxRoller"><a pageno="item" :class="{'selectpage' : pageNo == item}" @click="selectpage(item)">{{item}}</a></span>
        </span>
        <a href="#formhead" id="nextPage" @click="nextPage">下一页</a>
        <a href="#formhead" id="lastPage" @click="lastPage">末页</a>
        共<span id="totalPages">{{totalPages}}</span>页&nbsp;&nbsp;&nbsp;&nbsp;每页显示个数：<input class="pw-default-input" style="text-align: center;height: 26px;" type="text" v-model="pageSize" @keyup.enter="changePageSize" size="3" >
        &nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;{{totalCount}}&nbsp;条
    </div>
</template>

<script type="text/javascript">
export default {
    props: ['totalCount'],
    data(){
        return{
            pageSize: 10,
            pageNo: 1,
            rollerWidth: 10
        }
    },
    methods: {
        firstPage(){
            this.pageNo = 1;
            this.$emit("pageLoad",this.pageNo,this.pageSize);
        },
        previousPage(){
            this.pageNo = ((this.pageNo - 1) > 1 ? (this.pageNo - 1) : 1);
            this.$emit("pageLoad",this.pageNo,this.pageSize);
        },
        nextPage(){
            this.pageNo = ((this.pageNo + 1) > this.totalPages ? this.totalPages : (this.pageNo + 1));
            this.$emit("pageLoad",this.pageNo,this.pageSize);
        },
        lastPage(){
            this.pageNo = this.totalPages;
            this.$emit("pageLoad",this.pageNo,this.pageSize);
        },
        selectpage(pageNo){
            this.pageNo = pageNo;
            this.$emit("pageLoad",this.pageNo,this.pageSize);
        },
        changePageSize(){
            this.pageNo = 1;
           this.$emit("pageLoad",this.pageNo,this.pageSize);
        }
    },
    computed:{
        totalPages(){
            var mod = this.totalCount % this.pageSize;
            var totalPages = Math.floor(this.totalCount / this.pageSize);
			totalPages = (totalPages < 1 ? 1 : totalPages) + (mod > 0 && totalPages > 0 ? 1 : 0);
            return totalPages;
        },
        minRoller(){
            var minRoller = this.pageNo - Math.floor(this.rollerWidth / 2);
            minRoller = minRoller < 1 ? 1 : minRoller;
            return minRoller;
        },
        maxRoller(){
            var maxRoller = this.pageNo + Math.ceil(this.rollerWidth / 2) - 1;
            if(maxRoller - this.minRoller < this.rollerWidth) maxRoller = this.minRoller + this.rollerWidth - 1;
            maxRoller = maxRoller > this.totalPages ? this.totalPages : maxRoller;
            return maxRoller;
        }

    }
}
</script>

<style scoped>
.item_paging {
    color:#333;
    width:99%;
    height: 30px;
    border-radius:3px;
    background-color:#fff;
    padding-top: 5px;
    padding-bottom:5px;
}

.item_paging a,.item_paging span.yui-pg-next,.item_paging span.yui-pg-last{
    color:#333;
    font-family: 微软雅黑;
    padding:2px 8px;
    border-radius:3px;
    border:1px solid #333;
    display: inline-block;
    text-decoration: none;

}

.item_paging a:link{
    color:#333;
}
.item_paging a:hover{
    background-color:#b2b2b2;
    color:#fff;
    border:1px solid #b2b2b2;
}
.selectpage{
    color:#fff;
    background-color:#b2b2b2;
    font-family: 微软雅黑;
    padding:2px 8px;
    border-radius:3px;
}
#pageRoller span{
    margin-left: 2px;
    margin-right: 2px;
}
    #pageRoller span a{
    color:#333;
    font-family: 微软雅黑;
    padding:2px 8px;
    border-radius:3px;
    text-decoration: none;
    cursor: pointer;
}
    #pageRoller span a:link{
    color:#333;
    /*background-color:#5787b8;*/
    font-family: 微软雅黑;
    padding:2px 8px;
    border-radius:3px;
}
    #pageRoller span a:hover{
    color:#fff;
    background-color:#5787b8;
    font-family: 微软雅黑;
    padding:2px 8px;
    border-radius:3px;
}
.pw-default-input {
    vertical-align: middle;
    font-family: 微软雅黑;
    color: #333;
    text-decoration: none;
    border: none !important;
    border-top: #888888 1px solid !important;
    border-left: #888888 1px solid !important;
    border-bottom: #888888 1px solid !important;
    border-right: #888888 1px solid !important;
    border-radius: 3px;
    box-sizing: border-box;
}
</style>
